<template>
  <vxe-modal :key="dialogKey" :loading="loading" title="查看立项文件" v-model="dialogVisible" width="60%" showFooter esc-closable show-zoom resize>
    <div style="height: 80vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 立项文件 基本信息 -->
        <el-card class="box-card" shadow="hover" style="min-height: 20vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">基本信息</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  年度：
                </div>
              </template>
              {{ lxWjList.nd }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-mobile-phone"></i>
                  文件名称：
                </div>
              </template>
              {{ lxWjList.wjName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-tickets"></i>
                  批准文号：
                </div>
              </template>
              {{ lxWjList.pzWh }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  批准单位：
                </div>
              </template>
              {{ lxWjList.pzDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-office-building"></i>
                  备注：
                </div>
              </template>
             {{ lxWjList.bz }}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>
        <br>
        <!-- 立项文件 课题信息 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">课题信息</span>
          </div>
          <el-table height="18vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="LxWjKtXxList">
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column label="年度" align="center" prop="nd" width="100"/>
            <el-table-column label="课题编号" align="center" prop="ktBh"/>
            <el-table-column label="课题名称" align="center" prop="ktName">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleKtNameButtonClick(scope.row)"
                >
                  <el-link type="primary">{{ scope.row.ktName }}</el-link>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="课题归属" align="center" prop="ktGs"/>
            <el-table-column label="申报单位" align="center" prop="zrBm" show-overflow-tooltip/>
            <el-table-column label="项目总额(万元)" align="center" prop="xmze">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="xmZeButtonClick(scope.row)"
                >
                  <el-link type="primary">{{ scope.row.xmze }}</el-link>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="开始时间" align="center" prop="qTime"/>
          </el-table>
        </el-card>
        <br>
        <!-- 立项文件 相关附件 -->
        <el-card class="box-card" shadow="hover" style="min-height: 25vh">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">相关附件</span>
          </div>
          <el-table height="25vh" :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
                    :data="LxWjFjList">
<!--            <el-table-column type="selection" width="50" align="center"/>-->
            <el-table-column label="序号" align="center" type="index" width="50"/>
            <el-table-column show-overflow-tooltip label="文件名称" align="center" prop="fileName"
                             :formatter="getFileNames"/>
            <el-table-column label="文件大小" align="center" prop="fileSize" width="200">
            </el-table-column>
            <el-table-column label="操作" align="center" width="250">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleDownload(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-card>
    </div>
    <!-- 查询项目申报(主表 + 子表) 弹窗 -->
    <Xmxq ref="xmxq"></Xmxq>

    <!-- 查看项目预算 弹窗 -->
    <XmZe ref="xmze"></XmZe>
  </vxe-modal>
</template>

<script>
import {getLxwj, selectLxwjLxxxByLxwjId} from "@/api/xmgl/lxgl/lxwj/lxwj";
import Xmxq from "@/views/xmgl/lxgl/xmsb/components/xmxq";
import XmZe from "@/views/xmgl/lxgl/xmsb/components/xmZe";

export default {
  name: "lxWjXq",
  components: {XmZe, Xmxq},
 //立项文件详情页面
  data() {
    return {
      loading: true,
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "150px",
        // 排列第二行
        'word-break': 'break-all'
      },
      lxwjId: null,
      lxWjList: [],
      LxWjKtXxList: [],
      LxWjFjList: [],
      dialogKey: 0,
    }
  },
  methods: {
    handleOpen(row) {
      this.loading = true;
      this.dialogKey++
      this.dialogVisible = true;
      this.lxwjId = row.lxwjId
      console.log(this.lxwjId, 'dasad')
      this.getData();
    },
    getData() {
      let lxwjId = this.lxwjId
      getLxwj(lxwjId).then(res => {
        this.lxWjList = res.data
        this.LxWjFjList = res.data.lxglLxwjFjList
        selectLxwjLxxxByLxwjId(lxwjId).then(res => {
          this.LxWjKtXxList = res.data.lxglLxwjKtxxList
        })
          setTimeout(() => {
        this.loading = false
          }, 500)
      })
    },
    // 查看项目详情
    handleKtNameButtonClick(row) {
      this.$refs.xmxq.handleOpen(row);
    },
    // 查询项目总额信息(打开项目总额弹窗)
    xmZeButtonClick(row) {
      this.$refs.xmze.handleOpen(row);
    },
    // 获取文件名原名
    getFileNames(row) {
      // 从路径中提取文件名
      return row.fileName.split('/').pop(); // 返回文件名部分
    },
    // 文件下载处理
    handleDownload(row) {
      const resource = row.fileName;
      // 默认方法
      this.$download.resource(resource);
    },
  },
}
</script>

<style scoped>
.right-align-label {
  text-align: right;
}

/* 定义表头中特定类名的文本居中 */
.el-table .custom-header .cell {
  text-align: center !important;
}
/* header 头部背景 */
/deep/ .el-card__header {
  padding: 3px 7px 3px;
  min-height: 10px;
  background-color: aliceblue;
}
</style>
